<template>
  <view class="view">
    <view class="main" v-for="(item, index) in order.order_item_list" :key="item.id">
      <view class="goods-info main-item">
        <image :src="item.goods_info.cover_url"></image>
        <view class="info">
          <view class="name">{{ item.goods_info.name }}</view>
          <view class="params">{{ item.goods_param.name }}</view>
        </view>
      </view>
      <view class="main-item"><uni-rate allow-half v-model="formList[index].score" /></view>
      <uni-easyinput
        class="main-item"
        type="textarea"
        v-model="formList[index].content"
        placeholder="请输入内容"
      ></uni-easyinput>
    </view>

    <view class="ctrl-wrapper">
      <view class="ctrl-content">
        <view class="submit-btn" @click="handleSubmitComment()">提交</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return { order: {}, formList: [] }
  },
  onLoad(options) {
    this.order = JSON.parse(options.order)
    this.userId = parseInt(getApp().globalData.userInfo.id)
    this.order.order_item_list.forEach((element) => {
      this.formList.push({
        user_id: this.userId,
        order_item_id: element.id,
        goods_id: element.goods_id,
        score: '',
        content: ''
      })
    })
    // console.log(rthis.orde)
  },
  methods: {
    async handleSubmitComment() {
      for (let i = 0; i < this.formList.length; i++) {
        if (this.formList[i].score == '' || this.formList[i].content == '') {
          const res = await uni.showModal({
            title: '提示',
            content: '您的评论列表中有部分未评论，是否默认好评？'
          })
          if (!res.confirm) {
            return
          } else {
            break
          }
        }
      }

      // 检查若有空的填入默认好评
      for (let i = 0; i < this.formList.length; i++) {
        if (this.formList[i].score == '') {
          this.formList[i].score = 5
        }

        if (this.formList[i].content == '') {
          this.formList[i].content = '系统默认评价'
        }
      }

      const { data: res } = await uni.request({
        url: this.$domain.data + '/reviewedOrder',
        method: 'POST',
        header: getApp().globalData.header,
        data: {
          order_id: this.order.id,
          comment_list: this.formList
        }
      })

      if (res.status !== 200) {
        this.$checkStatus(res.status)
        return
      }
      uni.showToast({
        icon: 'success',
        title: '评价成功'
      })

      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  padding: 30upx;
}

.main-item {
  margin-bottom: 20upx;
}

.ctrl-wrapper {
  width: 100%;
  height: 100upx;
  .ctrl-content {
    width: 100%;
    height: 100upx;
    position: fixed;
    left: 0%;
    bottom: 0%;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 30upx;
    box-sizing: border-box;
    z-index: 999;

    .submit-btn {
      padding: 10upx 50upx;
      background-color: #ffeee4;
      color: #f27f32;
      border-radius: 10upx;
      font-weight: 900;
    }
  }
}

.main {
  width: 100%;
  padding: 30upx;
  margin-bottom: 40upx;
  box-sizing: border-box;
  background-color: #fff;
  .goods-info {
    display: flex;
    justify-content: flex-start;
    image {
      width: 120upx;
      height: 120upx;
      margin-right: 20upx;
      border-radius: 10upx;
    }

    .info {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;

      .name {
        font-size: 35upx;
        margin-bottom: 10upx;
      }
      .params {
        font-size: 30upx;
      }
    }
  }
}
</style>
